<template>
  <div class="resume-container flex  w-full">
    <div class="edit-section flex-grow  flex-col w-1/2">
      <h1>编辑我的简历</h1>
      <div class="form-container">
        <BasicForm v-model:formData="resumeData.basic" />
        <CustomInfo v-model="resumeData.customInfo" />
        <WorkExperience v-model="resumeData.workExperience" />
        <EducationForm v-model="resumeData.educations" />
      </div>
    </div>

    <!-- 预览模块 -->
    <div class="preview-section flex-grow  flex-col w-1/2">
      <div class="resume-content">
        <h1>{{ resumeData.basic.name || '我' }} </h1>
        <div class="section mt-2">
          <h2>基本信息</h2>
          <div class="flex flex-col flex-wrap mt-2">
            <div class="flex ">
              <div class="w-1/2">职位: {{ resumeData.basic.jobTitle || '-' }}</div>
              <div class="w-1/2">电话: {{ resumeData.basic.phone || '-' }}</div>
            </div>
            <div class="flex ">
              <div class="w-1/2">出生日期: {{ resumeData.basic.birthday || '-' }}</div>
              <div class="w-1/2">邮箱: {{ resumeData.basic.email || '-' }}</div>
            </div>
            <div class="flex " v-if="resumeData.customInfo?.length">
              <div class="w-1/2" v-for="(item, index) in resumeData.customInfo">
                {{ item.key }}: {{ item.value }}
              </div>
            </div>
          </div>
        </div>

        <div class="section" v-if="resumeData.workExperience?.length">
          <h2>工作经历</h2>
          <div v-for="(exp, index) in resumeData.workExperience" :key="index">
            <div class="flex items-center">
              <h3>{{ exp.company || '公司名称' }}</h3>-
              <h3>{{ exp.position || '职位' }} </h3>
              <div class="ml-2 text-sm">{{ exp.location || '地点' }}</div>
              <div class="ml-auto">{{ exp.date || '时间范围' }}</div>
            </div>
            <ul>
              <li v-for="(item, i) in exp.responsibilities" :key="i">{{ item }}</li>
            </ul>
          </div>
        </div>
        <div class="section" v-if="resumeData.educations?.length">
          <h2>教育背景</h2>
          <div v-for="(edu, index) in resumeData.educations" :key="index">
            <h3>{{ edu.school || '学校名称' }}</h3>
            <p>{{ edu.degree || '学历' }} | {{ edu.major || '专业' }} | {{ edu.date || '时间范围' }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import BasicForm from '~/components/resume/BasicForm.vue'
import EducationForm from '~/components/resume/EducationForm.vue'
import CustomInfo from '~/components/resume/CustomInfo.vue'
import WorkExperience from '~/components/resume/WorkExperience.vue'

const resumeData = reactive({
  basic: {
    name: '',
    phone: '',
    email: ''
  },
  customInfo: [
    { key: '个人网站', value: 'https://your.personal.com' },
    { key: 'Github', value: 'https://github.com/yourname' }
  ],
  workExperience: [{
    company: '',
    position: '',
    location: '',
    dateRange: [],
    description: '',
    technologies: []
  }],
  educations: [{
    school: '',
    degree: '',
    major: '',
    date: ''
  }]
})


</script>

<style scoped>
.resume-container {
  margin: 0 auto;
  padding: 10px;
}

.edit-section,
.preview-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.resume-content {
  padding: 20px;
}

.section {
  margin-bottom: 20px;
}

h1 {
  color: #42b983;
  border-bottom: 2px solid #42b983;
  padding-bottom: 10px;
}

h2 {
  color: #42b983;
  border-left: 4px solid #42b983;
  padding-left: 10px;
}

button {
  padding: 10px 20px;
  margin-top: 20px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>